<template>
    <nav class="active" id="nav">
      <ul>
        <li @click="toHome">{{left}}</li>
        <li @click="toAbout">{{mid}}</li>
        <li @click="logout">{{right}}</li>
      </ul>
      <button class="icon" id="toggle" @click="change">
        <div class="line line1"></div>
        <div class="line line2"></div>
      </button>
    </nav>
</template>
<script>
    export default{
        name:'MyNav',
        props:{
          left:String,
          mid:String,
          right:String,
        },
        methods:{
            change:function(){
                const nav = document.getElementById('nav');
                this.$emit('topChange');
                const lis=document.querySelectorAll('li');
                lis.forEach(item=>{
                  item.classList.toggle('notseen');
                })
                nav.classList.toggle('active');
            },
            toHome:function(){
                this.$emit('toHome');
            },
            toAbout:function(){
                this.$emit('toAbout');
            },
            getCookie:function(key) {
            var cookieArr = document.cookie.split('; ');
            for(var i = 0; i < cookieArr.length; i++) {
            var arr = cookieArr[i].split('=');
            if(arr[0] === key) {
                return arr[1];
            }
            }
                return false;
            },
            logout:function(){
                console.log("logout");
                let uname=this.getCookie('username');
                let pw=this.getCookie('password');
                let uid=this.getCookie('uid');
                console.log(uname+pw+uid);
                this.axios.post('/user/logout',{username:uname,password:pw,uid:uid})
                .then(response=>{
                    if(response.data.code===200){
                    document.cookie="isLogin=false";
                    this.$message.success('退出成功!');
                    this.$store.commit('logout');
                    this.$router.push('/home');
                    }else{
                    console.log(this.$store.username+this.$store.password);
                    this.$message.error(response.data.msg+'退出失败!');
                    }
                })
                }
        }
    }
</script>
<style scoped>
nav {
  margin-top: 1rem;
  background-color: #fff;
  padding: 0;
  width: 6rem;
  height:3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  box-shadow: 0 0.2rem 0.4rem rgba(12, 11, 11, 0.4);
  transition: width 0.6s linear;
  opacity: 0.9;
}
.notseen{
  display: none;
}
nav.active {
  width: 28rem;
}
li{
    cursor:pointer;
    font-size:1rem;
   font-family: Arial, Helvetica, sans-serif;
}
li:hover{
      color:#8e24aa;
}
nav ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 0;
  transition: width 0.6s linear;
}

nav.active ul {
  width: 100%;
}

nav ul li {
  transform: rotateY(0deg);
  opacity: 0;
  transition: transform 0.6s linear, opacity 0.6s linear;
}

nav.active ul li {
  opacity: 1;
  transform: rotateY(360deg);
}

nav ul a {
  position: relative;
  color: #000;
  text-decoration: none;
  margin: 0 10px;
}

.icon {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  height: 30px;
  width: 30px;
}

.icon:focus {
  outline: 0;
}

.icon .line {
  background-color: #5290f9;
  height: 2px;
  width: 20px;
  position: absolute;
  top: 10px;
  left: 5px;
  transition: transform 0.6s linear;
}

.icon .line2 {
  top: auto;
  bottom: 10px;
}

nav.active .icon .line1 {
  transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
  transform: rotate(765deg) translateY(-5.5px);
}
</style>
